<!-- 用户编辑弹窗 -->
<template>
    <ele-modal
            width="740px"
            :visible="visible"
            :append-to-body="true"
            :close-on-click-modal="false"
            custom-class="ele-dialog-form"
            :title="isUpdate ? '修改独立账号' : '添加独立账号'"
            @update:visible="updateVisible"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="180px" >

            <el-form-item label="名称:" prop="name">
                <el-input type="text" v-model="form.name" label="" clearable></el-input>
            </el-form-item>


            <el-form-item label="账号:" prop="username">
                <el-input type="text" v-model="form.username" label="描述" clearable></el-input>
            </el-form-item>


            <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="form.password" label="描述" clearable></el-input>
            </el-form-item>


            <el-form-item label="阿里云访问域名:" prop="oss_url">
                <el-input
                        clearable
                        v-model="form.oss_url"
                        placeholder="阿里云访问域名"
                />
            </el-form-item>
            <el-form-item label="阿里云公钥信息:" prop="oss_accessId">
                <el-input
                        clearable
                        v-model="form.oss_accessId"
                        placeholder="阿里云公钥信息"
                />
            </el-form-item>

            <el-form-item label="阿里云私钥信息:" prop="oss_accessSecret">
                <el-input
                        clearable
                        v-model="form.oss_accessSecret"
                        placeholder="阿里云私钥信息"
                />
            </el-form-item>

            <el-form-item label="阿里云空间名称:" prop="oss_bucket">
                <el-input
                        clearable
                        v-model="form.oss_bucket"
                        placeholder="阿里云空间名称"
                />
            </el-form-item>
            <el-form-item label="阿里云数据中心:" prop="oss_endpoint">
                <el-input
                        clearable
                        v-model="form.oss_endpoint"
                        placeholder="阿里云数据中心"
                />
            </el-form-item>

            <el-form-item label="是否开机:">
                <el-radio-group v-model="form.avatar_swich">
                    <el-radio :label="0" :value="0">未开启</el-radio>
                    <el-radio :label="1" :value="1">开启</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否开启声音机器:">
                <el-radio-group v-model="form.sound_swich">
                    <el-radio :label="0" :value="0">未开启</el-radio>
                    <el-radio :label="1" :value="1">开启</el-radio>
                </el-radio-group>
            </el-form-item>


            <el-form-item label="到期时间:" prop="due_time">
                <el-date-picker
                        v-model="form.due_time"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>


        </el-form>


        <template v-slot:footer>
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save"
            >保存
            </el-button>
        </template>
    </ele-modal>
</template>

<script>
    import { add, remove, modify,update} from '@/api/composite/';

    const DEFAULT_FORM = {
        id: 0,
        due_time: '',
        account_id:0,
        username:'',
        password:'',
        oss_accessId:'',
        oss_accessSecret:'',
        oss_bucket:'',
        oss_endpoint:'',
        oss_url:'',
        sound_swich:'',
        avatar_swich:'',
        name :''


    };

    export default {
        name: 'CardEdit',
        components: {},
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: Object,
            account_id:Number

        },
        data() {
            return {
                // 表单数据
                form: {...DEFAULT_FORM},
                // 表单验证规则
                rules: {},
                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false,
            };
        },
        methods: {
            /* 保存编辑 */
            save() {
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return false;
                    }

                    this.loading = true;
                    const data = {
                        ...this.form,
                    };

                    const saveOrUpdata = this.isUpdate ? update : add;

                    saveOrUpdata(data).then((msg) => {
                        this.loading = false;
                        this.$message.success(msg);
                        this.updateVisible(false);
                        this.$emit('done');
                    }).catch((e) => {
                        this.loading = false;
                        this.$message.error(e.message);
                    });
                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit('update:visible', value);
            }
        },
        watch: {
            visible(visible) {
                if (visible) {
                this.form.account_id=  this.account_id;

                if (this.data) {
                        this.$util.assignObject(this.form, {
                            ...this.data
                        });
                        this.isUpdate = true;

                    } else {
                        this.isUpdate = false;
                    }
                } else {
                    this.$refs['form'].clearValidate();
                    this.form = {...DEFAULT_FORM};
                }
            }
        }
    };
</script>
